<template>
  <view class="container">
    <view class="top">
      <view class="balance flex">
        <view class="name">账户余额</view>
        <view class="number">
          <text>￥</text>
          <text>9000.00</text>
        </view>
      </view>
      <view class="total flex">
        <view class="name">本月累计提现</view>
        <view class="number">￥600</view>
      </view>
    </view>
    <view class="content">
      <view class="box flex">
        <view class="name">提现至</view>
        <view @click="goBindList" class="bind flex">
          <!-- <image src="/static/common/alipay-icon.png" mode=""></image> -->
          <image class="add" src="/static/common/add-icon.png" mode=""></image>
          <!-- <text>支付宝（8888）</text> -->
          <text>添加新账号</text>
          <view class="arrow"></view>
        </view>
      </view>
      <view class="box">
        <view class="name">提现金额</view>
        <view class="money flex">
          <view class="input flex">
            <text>￥</text>
            <input type="number" v-model="money" placeholder="满20.00元可提现" />
          </view>
          <view class="withdraw-all" @click="withdrawAll">全部提现</view>
        </view>
      </view>
      <view @click="withdrawConfirm" class="btn">确认提现</view>
    </view>
    <view class="tips">订单确认收货次月25号可提现</view>
    <view class="tips tips-bottom">提现须知</view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
const money = ref('');
const withdrawAll = () => {};
const withdrawConfirm = () => {};
const goBindList = () => {
  uni.navigateTo({
    url: '/subPages/bindList/bindList',
  });
};
</script>

<style lang="scss" scoped>
.container {
  background: #f8f8f8;
  min-height: 100vh;
  padding: 12px;
  .top {
    border-radius: 12px;
    background: radial-gradient(35% 80% at 100% 0%, #ffdcdd 0%, #ffffff 100%);
    padding: 0 12px;
    .name {
      font-weight: 400;
      font-size: 12px;
      color: #999;
    }
    .balance {
      height: 56px;
      justify-content: space-between;
      border-bottom: 1px solid #9999994d;
      .number {
        font-weight: 500;
        font-size: 20px;
        color: #333;
        text {
          &:first-child {
            font-size: 12px;
          }
        }
      }
    }
    .total {
      height: 44px;
      justify-content: space-between;
      .number {
        font-weight: 400;
        font-size: 12px;
        color: #333;
      }
    }
  }
  .content {
    border-radius: 12px;
    padding: 4px 12px 20px;
    background-color: #ffffff;
    margin-top: 12px;
    .box {
      padding: 20px 0;
      border-bottom: 1px solid #9999994d;
      justify-content: space-between;
      .name {
        font-weight: 500;
        font-size: 14px;
      }
      .bind {
        justify-content: space-between;
        width: fit-content;
        image {
          width: 16px;
          height: 16px;
          margin-right: 6px;
          &.add {
            width: 8px;
            height: 8px;
          }
        }
        text {
          font-weight: 500;
          font-size: 14px;
          color: #333;
        }
        .arrow {
          width: 6px;
          height: 6px;
          border-top: 1px solid #333;
          border-right: 1px solid #333;
          transform: rotate(45deg);
          margin-left: 8px;
        }
      }
      .money {
        margin-top: 30px;
        justify-content: space-between;
        .input {
          align-items: flex-end;
          input {
            flex: 1;
            margin-left: 5px;
            font-weight: 500;
            font-size: 20px;
            color: #333;
          }
          text {
            font-weight: 500;
            font-size: 12px;
            color: #333;
          }
        }
        .withdraw-all {
          font-weight: 500;
          font-size: 12px;
          color: #ff0309;
        }
      }
    }
    .btn {
      background: linear-gradient(90deg, #ff0309 0%, #ff6c2a 100%);
      width: 295px;
      height: 50px;
      border-radius: 34px;
      text-align: center;
      line-height: 50px;
      margin: 20px auto 0;
      color: #fff;
      font-weight: 500;
      font-size: 16px;
    }
  }
  .tips {
    color: #999;
    font-weight: 400;
    font-size: 12px;
    margin-top: 12px;
    &.tips-bottom {
      position: absolute;
      bottom: 50px;
      left: 50%;
      transform: translateX(-50%);
      width: fit-content;
    }
  }
}
</style>
